<template>
	<view class="container">
		<view class="tilte">基础认证</view>
		<view class="desc">请确保以下信息时本人名下最新且有效的身份信息</view>
		<u-form :model="form" ref="uForm" class="form mt-30" label-width="0">
			<u-form-item prop="name" :border-bottom="false">
				<view class="form-item-wrapper flex justify-between align-center">
					<text class="label">姓名</text>
					<u-input class="input" input-align="right" v-model="form.name" placeholder="请填写您的姓名" />
				</view>
			</u-form-item>
			<u-form-item prop="number" :border-bottom="false">
				<view class="form-item-wrapper flex justify-between align-center">
					<text class="label">证件号码</text>
					<u-input class="input" input-align="right" v-model="form.number" placeholder="请填写您的证件号码" />
				</view>
			</u-form-item>
		</u-form>
		<view class="submit-btn mt-30" @tap="submit">确认并提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: "",
					number: ""
				},
				rules: {
					name: [{
						required: true,
						message: '请填写您的姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					number: [{
						required: true,
						message: '请填写您的证件号码',
						trigger: ['change', 'blur'],
					},{
						message: '证件号码有误',
						validator:(rule,value,callback)=>{
							return this.$u.test.idCard(value)
						},
						trigger: ['change', 'blur'],
					}]
				}
			};
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.api.recognizeSubmitApi({realName:this.form.name,IDNumber:this.form.number}).then(res=>{
							uni.showToast({
								icon:"success",
								title:"申请成功，等待审核"
							})
							setTimeout(()=>{
								this.$Router.back(1)
							},1000)
						})
					}
				})
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;

		.tilte {
			font-size: 44rpx;
			font-weight: 500;
			color: #000000;
		}

		.desc {
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #999999;
		}

		.form {
			padding: 30rpx;
			border-radius: 15rpx;
			background: #fff;
		}
		.form-item-wrapper{
			height: 50rpx;
			width: 100%;
		}
		.label{
			font-size: 24rpx;
			color: #333;
		}
		.input{
			flex-basis: 320rpx;
			text-align: right;
			flex-grow: 0;
		}
	}
</style>
